<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from "vue-router"
import { ElMessage } from 'element-plus'
import 'element-plus/dist/index.css'
import { login } from '@/api/auth'
import { useAuthStore } from '@/stores/auth'
const authStore = useAuthStore()


const router = useRouter()

const form = reactive({
  username: '2206631602',
  password: '123456',
  role: ''
})


const handleLogin = async () => {
  const res = await login(form)

  if (res.code !== 200) {
    ElMessage.error('账号或密码错误')
    return
  }
  
  // 存储用户信息
  authStore.token = res.data.token
  authStore.userInfo = res.data
  
  // 页面跳转
  const role = res.data.role
  if (role === 'admin') {
    // 保留当前页，页面跳转至 /home 页
    router.replace({ path: "/school/home" })
  } else if (role === 'class') {
    router.replace({ path: "/class/student" })
  } else if (role === 'department') {
    router.replace({ path: "/department/home" })
  }
}
</script>

<template>
  <div class="bg">
    <div class="login">
      <h1>学生综合素质培养管理</h1>
      <div class="row">
        <label>
          <el-input v-model="form.username" style="width: 240px" placeholder="请输入用户名" />
        </label>
      </div>

      <div class="row">
        <label>
          <el-input v-model="form.password" style="width: 240px" type="password" placeholder="请输入密码" show-password />
        </label>
      </div>

      <div class="row">
        <el-radio-group v-model="form.role">
          <el-radio value="admin" size="large">学校管理员</el-radio>
          <el-radio value="class" size="large">班级管理员</el-radio>
          <el-radio value="department" size="large">部门管理员</el-radio>
        </el-radio-group>
      </div>

      <div class="row">
        <el-button type="primary" @click="handleLogin">登录</el-button>
      </div>

    </div>
  </div>
</template>

<style scoped>
.bg {
  width: 100vw;
  height: 100vh;
  background-image: url("../assets/login-bg.jpeg");
  background-size: cover;
  background-repeat: no-repeat;
  position: fixed;
  /* 添加 position: fixed; */
  top: 0;
  /* 添加 top: 0; */
  left: 0;
  /* 添加 left: 0; */
  z-index: -2;
  /* 添加 z-index: -1; 以确保背景图在内容下方 */
}


.login {
  width: 600px;
  height: 400px;
  background-color: rgba(255, 255, 255, 0.9);
  margin: 50px auto;
  text-align: center;
  border-radius: 10px;
}

.login h1 {
  padding-top: 50px;
  font-size: 24px;
}

.row {
  margin: 20px auto;
}

.login .el-button {
  padding: 5px 40px;
}
</style>